<template>
  <view class="container">
    <view class="post-box">
      <view class="post-header">
        <view class="header-left">
          <van-icon name="contact" />
          <span style="margin-left: 5px;">{{username}}</span>
        </view>
        <view class="header-right">
          <span>{{formatTime(post.createTime)}}</span>
        </view>
      </view>
      <view class="post-body">
        <text>{{post.content}}</text>
        <image :src="post.image">
        </image>
      </view>
    </view>
    <view style="width: 100vw;height: 6px; background-color: #E7E8ED;box-sizing: border-box;"></view>
    <view class="comment-box">
      <div style="font-size: 20px;">
        评论区
      </div>
      <view class="comment-body" v-for="(item,index) in comments" :key="item.id">
        <view class="comment-header">
          <view class="comment-header-left">
            <van-icon name="contact" />
            <span style="margin-left: 5px;">匿名用户</span>
          </view>
          <view class="comment-header-right" v-show="item.userId === userId">
            <van-icon name="delete-o" style="font-size: 20px; color: red;" @click="handleDeleteReply(item.id)"/>
          </view>
        </view>
        <view class="comment-content">
          <div>{{item.content}}</div>
          <div style="text-align: end;">{{formatTime(item.createTime)}}</div>
        </view>
      </view>

    </view>

    <view class="comment-input-wrapper">
      <van-field @change="comment = $event.detail" center clearable label="评论" placeholder="请输入评论内容" :border="false"
        use-button-slot>
        <van-button @click="handleAddReply" slot="button" size="small" type="primary">
          发送
        </van-button>
      </van-field>
    </view>
  </view>
</template>

<script>
  import {addReply, getRepliesByPostId, deleteReply} from '@/api/reply.js'
  
  export default {
    data() {
      return {
        userId: 0,
        username: '',
        post: {},
        comments: [],
        comment: '',
      }
    },
    created() {
      this.userId = uni.getStorageSync('userId')
      this.username = uni.getStorageSync('username')
      this.post = uni.getStorageSync('post')
      getRepliesByPostId(this.post.id).then((res)=>{
        this.comments = res.data
      })
    },
    methods: {
      formatTime(time) {
        let date = new Date(time);
        let formattedTime = date.toLocaleString('zh-CN', {
          year: 'numeric',
          month: 'numeric',
          day: 'numeric',
          hour: '2-digit',
          minute: '2-digit',
          hour12: false
        }).replace(/\//g, '.').replace(',', '');  
        return formattedTime;  
      },
      handleAddReply() {
        let form = {
          postId: this.post.id,
          userId: this.userId,
          content: this.comment
        }
        addReply(form).then((res)=>{
          const t = this
          this.comment = {}
          uni.showToast({
            title: '评论成功',
            icon: 'none',
            duration: 1000
          });
          setTimeout(()=>{
            t.refreshComments()
          }, 1000)
        })
      },
      handleDeleteReply(id){
        const t = this
        deleteReply(id, this.userId).then((res)=>{
          uni.showToast({
            title: '删除成功',
            icon: 'none',
            duration: 1000
          });
          setTimeout(()=>{
            t.refreshComments()
          }, 1000)
        })
      },
      refreshComments(){
        getRepliesByPostId(this.post.id).then((res)=>{
          this.comments = res.data
        })
      }
    }
  }
</script>

<style scoped>
  .container {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: #fff;
  }

  .post-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .post-header {
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .post-body {
    font-size: 18px;
  }

  .header-left {}

  .header-right {
    font-size: 15px;
  }

  .comment-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
  }

  .comment-content {
    display: block;
  }
  
  .comment-input-wrapper {
     position: fixed;
      bottom: 10px;
      left: 0;
      width: 100vw;
      background-color: #fff;
      box-sizing: border-box;
      z-index: 1000;
  }
</style>